<template>
  <div>
    <h1>获奖记录</h1>
    <section class="main">
      <ul class="todo-list">
        <li class="todo" v-for="(item, index) in this.winRecord" :key="item.id">
          <div class="view">
            <span class="index">{{ item.id }}抽中</span>
            <label> {{ item.prizeGrade }}  {{ item.gift }}</label>
          </div>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
    export default {
        name: "WinRecord",
        data() {
            return{
                winRecord: null
            }
        },

        mounted() {
            const storedData = localStorage.getItem('winRecord');
            this.winRecord = JSON.parse(storedData);
        }
    }
</script>

<style scoped>
  .main {
    position: relative;
    z-index: 2;
  }

  .todo-list {
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
  }

  .todo-list li {
    position: relative;
    font-size: 24px;
    height: 60px;
    box-sizing: border-box;
    border-bottom: 1px solid #e6e6e6;
  }

  .todo-list li:last-child {
    border-bottom: none;
  }
</style>